<template>
	<view class="project-detail-container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="back-btn" @tap="goBack">
				<image class="back-icon" src="/static/icons/arrow_left.png"></image>
			</view>
			<text class="page-title">项目详情</text>
			<view class="more-btn" @tap="showMoreOptions">
				<image class="more-icon" src="/static/icons/more-vertical.png"></image>
			</view>
		</view>
		
		<!-- 项目基本信息 -->
		<scroll-view class="content-scroll" scroll-y>
			<view class="project-header">
				<view class="title-row">
					<text class="project-title">{{ project.title }}</text>
					<view class="status-tag" :class="getStatusClass(project.status)">{{ project.status }}</view>
				</view>
				
				<view class="company-row">
					<image class="company-logo" :src="project.companyLogo" mode="aspectFill"></image>
					<text class="company-name">{{ project.company_name }}</text>
					<text class="publish-time">{{ pubtime }}</text>
				</view>
				
				<view class="key-info-row">
					<view class="info-item">
						<text class="info-label">项目预算</text>
						<text class="info-value price">￥{{ project.budget_min }}{{ project.budgetUnit }}</text>
					</view>
					<view class="divider"></view>
					<view class="info-item">
						<text class="info-label">截止日期</text>
						<text class="info-value">{{ pubendtime }}</text>
					</view>
					<view class="divider"></view>
					<view class="info-item">
						<text class="info-label">当前投标数</text>
						<text class="info-value">{{ project.bid_count }}</text>
					</view>
				</view>
			</view>
			
			<!-- 项目内容标签页 -->
			<view class="tab-bar">
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'detail' }" 
					@tap="changeTab('detail')"
				>
					项目详情
				</view>
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'requirement' }" 
					@tap="changeTab('requirement')"
				>
					招标要求
				</view>
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'attachment' }" 
					@tap="changeTab('attachment')"
				>
					招标文件
				</view>
			</view>
			
			<!-- 项目详情内容 -->
			<view class="tab-content" v-if="activeTab === 'detail'">
				<view class="content-section">
					<text class="section-title">项目介绍</text>
					<view class="rich-text">
						<text class="paragraph">{{ project.description }}</text>
					</view>
				</view>
				
				<view class="content-section">
					<text class="section-title">项目地点</text>
					<view class="location-info">
						<view class="location-row">
							<image class="location-icon" src="/static/icons/location.png"></image>
							<text class="location-text">{{ project.location }}</text>
						</view>
						<view class="map-container">
							<image class="map-image" src="/static/images/map.jpg" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 招标要求内容 -->
			<view class="tab-content" v-if="activeTab === 'requirement'">
				<view class="content-section">
					<text class="section-title">资质要求</text>
					<view class="requirements-list">
						<view class="requirement-item" v-for="(item, index) in project.requirements" :key="index">
							<image class="check-icon" src="/static/icons/check-circle.png"></image>
							<text class="requirement-text">{{ item }}</text>
						</view>
					</view>
				</view>
				
				<view class="content-section">
					<text class="section-title">技术规格</text>
					<view class="specs-container">
						<view class="spec-item" v-for="(spec, index) in project.specifications" :key="index">
							<!-- <text class="spec-name">{{ spec.name }}</text>
							<text class="spec-value">{{ spec.value }}</text> -->
						</view>
					</view>
				</view>
				
				<view class="content-section">
					<text class="section-title">评标方式</text>
					<view class="evaluation-card">
						<!-- <view class="eval-item">
							<text class="eval-label">技术分（{{ project.evaluation.technical }}%）</text>
							<progress class="eval-progress" :percent="project.evaluation.technical" activeColor="#3b82f6" backgroundColor="#e5e7eb" stroke-width="6" />
						</view> -->
						
						<!-- <view class="eval-item">
							<text class="eval-label">商务分（{{ project.evaluation.business }}%）</text>
							<progress class="eval-progress" :percent="project.evaluation.business" activeColor="#8b5cf6" backgroundColor="#e5e7eb" stroke-width="6" />
						</view> -->
						
						<!-- <view class="eval-item">
							<text class="eval-label">价格分（{{ project.evaluation.price }}%）</text>
							<progress class="eval-progress" :percent="project.evaluation.price" activeColor="#f97316" backgroundColor="#e5e7eb" stroke-width="6" />
						</view> -->
					</view>
				</view>
			</view>
			
			<!-- 招标文件内容 -->
			<view class="tab-content" v-if="activeTab === 'attachment'">
				<view class="content-section">
					<text class="section-title">招标文件列表</text>
					<view class="file-list">
						<view class="file-item" v-for="(file, index) in project.images" :key="index" @tap="downloadFile(file)">
							<view class="file-icon" :class="getFileIconClass(file.type)">
								<image class="icon" :src="getFileIcon(file.type)"></image>
							</view>
							<view class="file-info">
								<!-- <text class="file-name">{{ file.name }}</text>
								<text class="file-meta">{{ file.size }} · {{ file.uploadTime }}</text> -->
								<image style="width: 200rpx; height: 200rpx;" :src="file"></image>
							</view>
							<view class="download-btn">
								<image class="download-icon" src="/static/icons/download.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 联系人信息 -->
			<view class="content-section">
				<text class="section-title">联系人信息</text>
				<view class="contact-card">
					<view class="contact-row">
						<!-- <image class="contact-avatar" :src="project.contact.avatar" mode="aspectFill"></image> -->
						<!-- <view class="contact-info">
							<text class="contact-name">{{ project.contact.name }}</text>
							<text class="contact-title">{{ project.contact.title }}</text>
						</view> -->
					</view>
					
					<view class="contact-actions">
						<button class="contact-btn" @tap="makePhoneCall">
							<image class="action-icon" src="/static/icons/phone.png"></image>
							<text>电话咨询</text>
						</button>
						<button class="contact-btn" @tap="startChat">
							<image class="action-icon" src="/static/icons/message.png"></image>
							<text>在线咨询</text>
						</button>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="action-group">
				<view class="action-btn" @tap="toggleFavorite">
					<image class="action-icon" :src="project.isFavorite ? '/static/icons/star-fill.png' : '/static/icons/star.png'"></image>
					<text class="action-text">{{ project.isFavorite ? '已收藏' : '收藏' }}</text>
				</view>
				<view class="action-btn" @tap="shareProject">
					<image class="action-icon" src="/static/icons/share.png"></image>
					<text class="action-text">分享</text>
				</view>
			</view>
			
			<button class="submit-btn" @tap="submitBid">立即投标</button>
		</view>
		
		<!-- 更多选项菜单 -->
		<view class="options-menu" v-if="showOptions" @tap="showOptions = false">
			<view class="menu-content" @tap.stop>
				<view class="menu-item" @tap="reportProject">
					<image class="menu-icon" src="/static/icons/flag.png"></image>
					<text class="menu-text">举报项目</text>
				</view>
				<view class="menu-item" @tap="addToCalendar">
					<image class="menu-icon" src="/static/icons/calendar.png"></image>
					<text class="menu-text">添加到日历</text>
				</view>
				<view class="menu-item" @tap="hideProject">
					<image class="menu-icon" src="/static/icons/eye-off.png"></image>
					<text class="menu-text">不再显示</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { formatDateTime } from '../../utils/formattime.js' 

// 模拟数据
// const mockProject = {
// 	id:1,
//   title: '企业官网开发项目',
//   status: 'open',
//   statusText: '招标中',
//   company: '某科技集团有限公司',
//   companyLogo: '/static/logo/company.png',
//   publishDate: '2025-05-01',
//   budget: '50,000',
//   budgetUnit: '元',
//   deadline: '2025-06-15',
//   bidCount: 12,
//   description: '本项目需要开发一个响应式企业官网，包含首页、产品展示、新闻中心、关于我们和联系方式等模块。要求采用Vue3+TypeScript技术栈，支持多语言切换，并需要对接公司现有的CMS系统。',
//   location: '北京市海淀区中关村软件园',
//   requirements: [
//     '具备3年以上前端开发经验',
//     '有Vue3+TypeScript实际项目经验',
//     '熟悉uni-app跨平台开发',
//     '提供至少2个类似案例'
//   ],
//   specifications: [
//     { name: '前端框架', value: 'Vue 3 + TypeScript' },
//     { name: 'UI框架', value: 'Element Plus' },
//     { name: '构建工具', value: 'Vite' }
//   ],
//   evaluation: {
//     technical: 40,
//     business: 30,
//     price: 30
//   },
//   attachments: [
//     { name: '招标文件.pdf', type: 'pdf', size: '2.5MB', uploadTime: '2025-04-28' },
//     { name: '技术规范.docx', type: 'word', size: '1.2MB', uploadTime: '2025-04-28' }
//   ],
//   contact: {
//     avatar: '/static/avatar/contact.jpg',
//     name: '张经理',
//     title: '项目负责人',
//     phone: '13800138000'
//   },
//   isFavorite: false
// }

// 状态管理
const project = ref({})
const pubtime = ref("")
const pubendtime = ref("")
const loading = ref(false)
const activeTab = ref('detail')
const showOptions = ref(false)
const showBidPopup = ref(false)
const bidAmount = ref('')
const bidDesc = ref('')


// 方法定义
const getStatusClass = (status) => {
  switch (status) {
    case 'open': return 'status-open'
    case 'closed': return 'status-closed'
    case 'cancelled': return 'status-cancelled'
    default: return ''
  }
}

const changeTab = (tab) => {
  activeTab.value = tab
}

const getFileIcon = (type) => {
  const icons = {
    pdf: '/static/icons/file-pdf.png',
    word: '/static/icons/file-word.png',
    excel: '/static/icons/file-excel.png',
    image: '/static/icons/file-image.png',
    zip: '/static/icons/file-zip.png',
    default: '/static/icons/file-default.png'
  }
  return icons[type] || icons.default
}

const getFileIconClass = (type) => {
  return `file-type-${type}`
}

const downloadFile = async (fileUrl) => {
  try {
    uni.showLoading({
      title: '下载中...',
      mask: true
    })
    
    // 1. 下载文件到临时路径
    const { tempFilePath } = await uni.downloadFile({
      url: fileUrl,
      timeout: 60000 // 超时时间（毫秒）
    })
    
    // 2. 保存到本地
    const savedFilePath = await uni.saveFile({
      tempFilePath
    })
    
    // 3. 提示保存成功
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success',
      duration: 2000
    })
    
    // 4. 安卓需要手动触发媒体库更新
    // #ifdef APP-PLUS
    if (plus.os.name.toLowerCase() === 'android') {
      const main = plus.android.runtimeMainActivity()
      const Intent = plus.android.importClass('android.content.Intent')
      const Uri = plus.android.importClass('android.net.Uri')
      const File = plus.android.importClass('java.io.File')
      
      const intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE)
      intent.setData(Uri.fromFile(new File(savedFilePath)))
      main.sendBroadcast(intent)
    }
    // #endif
    
    return savedFilePath
  } catch (err) {
    uni.hideLoading()
    uni.showToast({
      title: `下载失败: ${err.message || err}`,
      icon: 'none',
      duration: 3000
    })
    console.error('下载失败:', err)
    throw err
  }
}

const toggleFavorite = () => {
  project.isFavorite = !project.isFavorite
  uni.showToast({
    title: project.isFavorite ? '已收藏项目' : '已取消收藏',
    icon: 'none'
  })
}

const shareProject = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    title: project.title,
    summary: `企业项目招标: ${project.title}`,
    success: () => {
      uni.showToast({ title: '分享成功' })
    }
  })
}

const makePhoneCall = () => {
   // #ifdef APP-PLUS && ANDROID
    // 检查并请求权限
    plus.android.requestPermissions(['android.permission.CALL_PHONE'], (result) => {
      if (result.granted.length > 0) {
        const Intent = plus.android.importClass("android.content.Intent");
        const Uri = plus.android.importClass("android.net.Uri");
        const main = plus.android.runtimeMainActivity();
        const intent = new Intent(Intent.ACTION_CALL, Uri.parse(`tel:${project.contact.phone}`));
        main.startActivity(intent);
      } else {
        uni.showToast({ title: '无拨号权限', icon: 'none' });
      }
    });
    // #else
    uni.makePhoneCall({
      phoneNumber: project.contact.phone
    });
    // #endif
}

const startChat = () => {
	
  uni.navigateTo({
    url: `/pages/chat/chat-detail?touserid=${project.value.user_id}`
  })
}

const showMoreOptions = () => {
  showOptions.value = true
}

const reportProject = () => {
  uni.showToast({ title: '举报项目成功', icon: 'success' })
  showOptions.value = false
}

const addToCalendar = () => {
  uni.showToast({ title: '已添加到日历', icon: 'success' })
  showOptions.value = false
}

const hideProject = () => {
  uni.showToast({ title: '不再显示此项目', icon: 'success' })
  showOptions.value = false
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}

// const submitBid = () => {
//   if (!bidAmount.value || !bidDesc.value) {
//     uni.showToast({
//       title: '请填写完整投标信息',
//       icon: 'none'
//     })
//     return
//   }
  
//   // 模拟投标提交
//   uni.showLoading({ title: '提交中...' })
//   setTimeout(() => {
//     uni.hideLoading()
//     uni.showToast({
//       title: '投标成功',
//       icon: 'success'
//     })
//     showBidPopup.value = false
//     bidAmount.value = ''
//     bidDesc.value = ''
//   }, 1500)
// }
const submitBid = (project) => {
  // 同步方式检查token
  try {
    const token = uni.getStorageSync('token');
    if (token) {
      console.log("已成功登录！", token);
      // 已登录，跳转投标页面
      uni.navigateTo({
        url: `/pages/bid/bid-form?projectId=${project.id}`
      });
    } else {
      console.log("没有登录");
      // 未登录，跳转登录页面
      uni.navigateTo({
        url: `/pages/login/login`
      });
    }
  } catch (err) {
    console.log("获取存储失败", err);
    // 获取存储失败也视为未登录
    uni.navigateTo({
      url: `/pages/login/login`
    });
  }
}

const goBack = () => {
  uni.navigateBack()
}




// 生命周期
onLoad((options) => {
  console.log('页面参数:', options.id)
  // 实际项目中这里应该是获取项目详情的API调用
  uni.request({
  	url:`http://115.190.38.218/go/api/v1/projts/${options.id}`,
	method:'GET',
	
	success:(res)=>{
		console.log("获取到详情",res) 
		project.value = res.data.data
		
		console.log("项目数据：",project.value)
		
		pubtime.value = formatDateTime(project.value.created_at)
		pubendtime.value = formatDateTime(project.value.deadline)
		// 方法定义
		  console.log("格式化结果1:", formatDateTime(project.value.created_at)) // 直接调用
		   console.log("格式化结果2:", formatDateTime(project.value.deadline)) // 直接调用
	},
	fail: (err) => {
		console.log("详情获取失败：",err)
	}
  })
})
</script>

<style scoped>
	.project-detail-container {
		position: relative;
		min-height: 100vh;
		background-color: #f5f7fa;
		display: flex;
		flex-direction: column;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
	}
	
	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.back-btn, .more-btn {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon, .more-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.content-scroll {
		flex: 1;
	}
	
	.project-header {
		background-color: #fff;
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.title-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}
	
	.project-title {
		flex: 1;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
	}
	
	.status-tag {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 6rpx;
		margin-left: 16rpx;
		white-space: nowrap;
	}
	
	.status-open {
		background-color: rgba(16, 185, 129, 0.1);
		color: #10b981;
	}
	
	.status-closed {
		background-color: rgba(107, 114, 128, 0.1);
		color: #6b7280;
	}
	
	.status-cancelled {
		background-color: rgba(239, 68, 68, 0.1);
		color: #ef4444;
	}
	
	.company-row {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.company-logo {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	
	.company-name {
		font-size: 28rpx;
		color: #666;
		margin-right: 20rpx;
	}
	
	.publish-time {
		font-size: 26rpx;
		color: #999;
	}
	
	.key-info-row {
		display: flex;
		background-color: #f9fafb;
		border-radius: 16rpx;
		padding: 24rpx;
	}
	
	.info-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.info-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.info-value {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
	}
	
	.info-value.price {
		color: #f97316;
	}
	
	.divider {
		width: 1px;
		background-color: #e5e7eb;
		margin: 0 16rpx;
	}
	
	.tab-bar {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
		position: sticky;
		top: 0;
		z-index: 10;
	}
	
	.tab-item {
		flex: 1;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #666;
		position: relative;
	}
	
	.tab-item.active {
		color: #1d4ed8;
		font-weight: 600;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background-color: #1d4ed8;
		border-radius: 3rpx;
	}
	
	.tab-content {
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	
	.content-section {
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.content-section:last-child {
		border-bottom: none;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		position: relative;
		padding-left: 20rpx;
	}
	
	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background-color: #1d4ed8;
		border-radius: 4rpx;
	}
	
	.rich-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}
	
	.paragraph {
		margin-bottom: 20rpx;
		white-space: pre-wrap;
	}
	
	.location-info {
		margin-top: 20rpx;
	}
	
	.location-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.location-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}
	
	.location-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.map-container {
		width: 100%;
		height: 360rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	.map-image {
		width: 100%;
		height: 100%;
	}
	
	.requirements-list {
		margin-top: 20rpx;
	}
	
	.requirement-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}
	
	.check-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
	}
	
	.requirement-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}
	
	.specs-container {
		background-color: #f9fafb;
		border-radius: 16rpx;
		padding: 24rpx;
	}
	
	.spec-item {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 0;
		border-bottom: 1px solid #e5e7eb;
	}
	
	.spec-item:last-child {
		border-bottom: none;
	}
	
	.spec-name {
		font-size: 28rpx;
		color: #666;
	}
	
	.spec-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.evaluation-card {
		background-color: #f9fafb;
		border-radius: 16rpx;
		padding: 24rpx;
	}
	
	.eval-item {
		margin-bottom: 24rpx;
	}
	
	.eval-item:last-child {
		margin-bottom: 0;
	}
	
	.eval-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
		display: block;
	}
	
	.eval-progress {
		width: 100%;
		height: 12rpx;
		border-radius: 6rpx;
	}
	
	.file-list {
		margin-top: 20rpx;
	}
	
	.file-item {
		display: flex;
		align-items: center;
		background-color: #f9fafb;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
	}
	
	.file-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.file-type-pdf {
		background-color: rgba(239, 68, 68, 0.1);
	}
	
	.file-type-word {
		background-color: rgba(59, 130, 246, 0.1);
	}
	
	.file-type-excel {
		background-color: rgba(16, 185, 129, 0.1);
	}
	
	.file-type-zip {
		background-color: rgba(245, 158, 11, 0.1);
	}
	
	.file-type-image {
		background-color: rgba(139, 92, 246, 0.1);
	}
	
	.icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.file-info {
		flex: 1;
	}
	
	.file-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.file-meta {
		font-size: 24rpx;
		color: #999;
	}
	
	.download-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.download-icon {
		width: 36rpx;
		height: 36rpx;
	}
	
	.contact-card {
		background-color: #f9fafb;
		border-radius: 16rpx;
		padding: 24rpx;
	}
	
	.contact-row {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}
	
	.contact-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.contact-info {
		flex: 1;
	}
	
	.contact-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 8rpx;
	}
	
	.contact-title {
		font-size: 26rpx;
		color: #666;
	}
	
	.contact-actions {
		display: flex;
	}
	
	.contact-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10rpx;
		background-color: #fff;
		border: 1px solid #e5e7eb;
		color: #666;
	}
	
	.contact-btn .action-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	
	.bottom-bar {
		height: 120rpx;
		background-color: #fff;
		border-top: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	
	.action-group {
		display: flex;
		margin-right: 30rpx;
	}
	
	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.action-btn:last-child {
		margin-right: 0;
	}
	
	.action-icon {
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 8rpx;
	}
	
	.action-text {
		font-size: 24rpx;
		color: #666;
	}
	
	.submit-btn {
		flex: 1;
		height: 88rpx;
		background-color: #1d4ed8;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		border-radius: 44rpx;
	}
	
	.options-menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
		display: flex;
		align-items: flex-end;
	}
	
	.menu-content {
		width: 100%;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
	}
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.menu-item:last-child {
		border-bottom: none;
	}
	
	.menu-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.menu-text {
		font-size: 30rpx;
		color: #333;
	}
</style> 